<template>
    <div>
        <h1>这是child组件</h1>
        <span>父组件传递过来的数据:{{msg}}</span>
        <button @click="send">传值给父组件</button>
    </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
export default defineComponent({
    name: 'Child',
    // 接收父组件传递过来的参数
    // props接收的数据也不能直接改
    props: {
        msg: {
            // 数据类型校验
            type: String,
            // 是否必传, 默认是false
            // required: true,
            default: '默认值'
        }
    },
    setup(props, ctx) {
        let childMsg = ref('我是子组件的数据')
        console.log(props.msg)
        console.log(props)
        let send = ()=>{
            // 而是通过ctx.emit分发事件
            // emit第一个参数是事件名称，第二个是传递的数据
            ctx.emit('getData', childMsg.value)
        }
        return {
            childMsg,
            send
        }
    }
})
</script>